<template>
  <div class="bigBox">
    <el-carousel
      ref="carouselRef"
      direction="horizontal"
      indicator-position="none"
      arrow="never"
      :autoplay="true"
      :interval="5000"
      height="200px"
      width="500px"
    >
      <el-carousel-item v-for="item in 1" :key="item">
        <div id="structuralFailure" @click="clickRisk('倒塌风险')"></div>
      </el-carousel-item>
      <el-carousel-item v-for="item in 1" :key="item">
        <div id="riskAssessmentDataMember" @click="clickRisk('受伤')"></div>
      </el-carousel-item>
      <el-carousel-item v-for="item in 1" :key="item">
        <div id="riskAssessmentData" @click="clickRisk('死亡')"></div>
      </el-carousel-item>
      <el-carousel-item v-for="item in 1" :key="item">
        <div id="riskAssessmentEconomyData" @click="clickRisk('经济')"></div>
      </el-carousel-item>
    </el-carousel>
    <!-- <div id="riskAssessmentDataMember"  v-show="isShowChart.way!=='人员死亡'&&isShowChart.way!=='经济损失'"></div>
    <div id="riskAssessmentData"  v-show="isShowChart.way=='人员死亡'"></div>
    <div id="riskAssessmentEconomyData" v-show="isShowChart.way=='经济损失'"></div> -->
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { nextTick, onMounted } from 'vue';
const props = defineProps({
  datas: {
    required: true,
    type: Object,
    default: {},
  },
  isShowChart:{
    type: Object,
    default: {},
  }
});
const { datas,isShowChart } = toRefs(props);
const emit = defineEmits(['clickRisk']);
let structuralXAxis = ref([])
let structuralYAxis = ref([])
let memberXAxis = ref([]);
let memberYAxis = ref([]);
let statisticsDataXAxis = ref([]);
let statisticsDataYAxis = ref([]);

let economyDataXAxis = ref([]);
let economyDataYAxis = ref([]);
onMounted(() => {
  watch(
    () => (props.datas,props.isShowChart),() => {
      const memberData = ref([]);
      const statisticsData = ref([]);
      const economyData = ref([]);
      const structuralData = ref([])
      console.log(datas.value)
      memberData.value = datas.value.ryss;
      statisticsData.value = datas.value.rysw;
      economyData.value = datas.value.jjss;
      structuralData.value = datas.value.dtfx;
      structuralXAxis.value = structuralData.value.map((item)=>item.province)
      structuralYAxis.value = statisticsData.value.map((item)=>item.riskValue)
      memberXAxis.value = memberData.value.map((item) => item.province);
      memberYAxis.value = memberData.value.map((item) => item.injured);
      statisticsDataXAxis.value = statisticsData.value.map((item) => item.province);
      statisticsDataYAxis.value = statisticsData.value.map((item) => item.death);

      economyDataXAxis.value = economyData.value.map((item) => item.province);
      economyDataYAxis.value = economyData.value.map((item) => item.economyLoss);

      setTimeout(() => {
        structuralChart()
        memberChart();
        mstatisticsChart();
        economyChart();
      },0);
    },
    { deep: true, immediate: true }
  );
});
function clickRisk(type) {
  emit('clickRisk', type);
}
function structuralChart(){
  echarts.init(document.getElementById('structuralFailure')).dispose();
  let myChart = echarts.init(document.getElementById('structuralFailure'));
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: structuralXAxis.value,
      //x轴文字的配置
      axisLabel: {
        fontSize: 12,
        textStyle: {
          color: ' #fff',
        },
      },
      name:'省',
      nameTextStyle:{
          color:'#fff'
      }
    },
    yAxis: {
      type: 'value',
      name:'倒塌风险',
      nameTextStyle:{
          color:'#fff'
      },
      max:1,
      axisTick:{show:false},
			  axisLine:{show:false},
		      //设置Y轴颜色
			  splitLine:{
				show:true,
				lineStyle: { color: ['#475ADB'], type: 'dashed',opacity:0.5 }
			  },
		    axisLabel: {
	        textStyle: {
	          color:'rgba(255,255,255,0.5)',
	        }
        }
    },
    dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 4, // 一次性展示几个。
      },
    ],
    series: [
      {
        symbol: 'circle', //设定为实心点
        symbolSize: 7, //设定实心点的大小
        color: '#25FFAF', //设定实线点的颜色
        // data: [820, 932, 901, 934, 1290, 1330, 1320],
        data: structuralYAxis.value,
        type: 'line',
        lineStyle: {
          color: '#25FFAF',
        },
        areaStyle: {
          //区域填充渐变颜色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(37,255,175, 0.8)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(37,255,175, 0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  var timer = null;
  // 使用刚指定的配置项和数据显示图表。
  timer = setInterval(function () {
    // 每次向后滚动一个，最后一个从头开始；
    // SData.length - 1 为数组的长度，索引从0开始，所以长度减一；
    if (option.dataZoom[0].endValue == datas.value.length - 1) {
      option.dataZoom[0].endValue = 4;
      option.dataZoom[0].startValue = 0;
    } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    }
    myChart.setOption(option, true);
  }, 2000);
  myChart.setOption(option, true);
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
}
function memberChart() {
  echarts.init(document.getElementById('riskAssessmentDataMember')).dispose();
  let myChart = echarts.init(document.getElementById('riskAssessmentDataMember'));
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: memberXAxis.value,
      //x轴文字的配置
      axisLabel: {
        fontSize: 12,
        textStyle: {
          color: ' #fff',
        },
      },
      name:'省',
      nameTextStyle:{
          color:'#fff'
      }
    },
    yAxis: {
      type: 'value',
      name:'受伤人数期望/人',
      nameTextStyle:{
          color:'#fff'
      },
      max:30000,
      axisTick:{show:false},
			  axisLine:{show:false},
		      //设置Y轴颜色
			  splitLine:{
				show:true,
				lineStyle: { color: ['#475ADB'], type: 'dashed',opacity:0.5 }
			  },
		    axisLabel: {
	        textStyle: {
	          color:'rgba(255,255,255,0.5)',
	        }
        }
    },
    dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 4, // 一次性展示几个。
      },
    ],
    series: [
      {
        symbol: 'circle', //设定为实心点
        symbolSize: 7, //设定实心点的大小
        color: '#25FFAF', //设定实线点的颜色
        // data: [820, 932, 901, 934, 1290, 1330, 1320],
        data: memberYAxis.value,
        type: 'line',
        lineStyle: {
          color: '#25FFAF',
        },
        areaStyle: {
          //区域填充渐变颜色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(37,255,175, 0.8)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(37,255,175, 0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  var timer = null;
  // 使用刚指定的配置项和数据显示图表。
  timer = setInterval(function () {
    // 每次向后滚动一个，最后一个从头开始；
    // SData.length - 1 为数组的长度，索引从0开始，所以长度减一；
    if (option.dataZoom[0].endValue == datas.value.length - 1) {
      option.dataZoom[0].endValue = 4;
      option.dataZoom[0].startValue = 0;
    } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    }
    myChart.setOption(option, true);
  }, 2000);
  myChart.setOption(option, true);
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
}
function mstatisticsChart() {
  echarts.init(document.getElementById('riskAssessmentData')).dispose();
  let myChart = echarts.init(document.getElementById('riskAssessmentData'));
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: statisticsDataXAxis.value,
      //x轴文字的配置
      axisLabel: {
        fontSize: 12,
        textStyle: {
          color: ' #fff',
        },
      },
      name:'省',
      nameTextStyle:{
          color:'#fff'
      }
    },

    yAxis: {
      type: 'value',
      name:'死亡人数期望/人',
      nameTextStyle:{
          color:'#fff'
      },
      max:8000,
      axisTick:{show:false},
			  axisLine:{show:false},
		      //设置Y轴颜色
			  splitLine:{
				show:true,
				lineStyle: { color: ['#475ADB'], type: 'dashed',opacity:0.5 }
			  },
		    axisLabel: {
	        textStyle: {
	          color:'rgba(255,255,255,0.5)',
	        }
        }
    },
    dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 4, // 一次性展示几个。
      },
    ],
    series: [
      {
        symbol: 'circle', //设定为实心点
        symbolSize: 7, //设定实心点的大小
        color: '#25FFAF', //设定实线点的颜色
        data: statisticsDataYAxis.value,
        type: 'line',
        lineStyle: {
          color: '#25FFAF',
        },
        areaStyle: {
          //区域填充渐变颜色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(37,255,175, 0.8)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(37,255,175, 0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  var timer = null;
  // 使用刚指定的配置项和数据显示图表。
  timer = setInterval(function () {
    // 每次向后滚动一个，最后一个从头开始；
    // SData.length - 1 为数组的长度，索引从0开始，所以长度减一；
    if (option.dataZoom[0].endValue == datas.value.length - 1) {
      option.dataZoom[0].endValue = 4;
      option.dataZoom[0].startValue = 0;
    } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    }
    myChart.setOption(option, true);
  }, 2000);
  myChart.setOption(option, true);
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
}
function economyChart() {
  echarts.init(document.getElementById('riskAssessmentEconomyData')).dispose();
  let myChart = echarts.init(document.getElementById('riskAssessmentEconomyData'));
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: economyDataXAxis.value,
      //x轴文字的配置
      axisLabel: {
        fontSize: 12,
        textStyle: {
          color: ' #fff',
        },
      },
      name:'省',
      nameTextStyle:{
          color:'#fff'
      }
    },

    yAxis: {
      type: 'value',
      name:'建筑直接经济损失/亿元',
      nameTextStyle:{
          color:'#fff',
          width:'200',
          padding:[0,0,0,35]
      },
      max:5000,
      axisTick:{show:false},
			  axisLine:{show:false},
		      //设置Y轴颜色
			  splitLine:{
				show:true,
				lineStyle: { color: ['#475ADB'], type: 'dashed',opacity:0.5 }
			  },
		    axisLabel: {
	        textStyle: {
	          color:'rgba(255,255,255,0.5)',
	        }
        }
    },
    dataZoom: [ 
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 4, // 一次性展示几个。
      },
    ],
    series: [
      {
        symbol: 'circle', //设定为实心点
        symbolSize: 7, //设定实心点的大小
        color: '#25FFAF', //设定实线点的颜色
        data: economyDataYAxis.value,
        type: 'line',
        lineStyle: {
          color: '#25FFAF',
        },
        areaStyle: {
          //区域填充渐变颜色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(37,255,175, 0.8)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(37,255,175, 0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  var timer = null;
  // 使用刚指定的配置项和数据显示图表。
  timer = setInterval(function () {
    // 每次向后滚动一个，最后一个从头开始；
    // SData.length - 1 为数组的长度，索引从0开始，所以长度减一；
    if (option.dataZoom[0].endValue == datas.value.length - 1) {
      option.dataZoom[0].endValue = 4;
      option.dataZoom[0].startValue = 0;
    } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    }
    myChart.setOption(option, true);
  }, 2000);
  myChart.setOption(option, true);
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
}
</script>

<style lang="scss" scoped>
#structuralFailure{
  width: 100%;
  height: 200px;
  margin: -20px 0 0 10px;
  div {
    position: relative;
    width: 450px!important;
    height: 200px!important;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
  }
}
#riskAssessmentDataMember {
  width: 100%;
  height: 200px;
  margin: -20px 0 0 10px;
  div {
    position: relative;
    width: 450px!important;
    height: 200px!important;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
  }
}
#riskAssessmentData {
  width: 100%;
  height: 200px!important;
  margin: -20px 0 0 10px;
  div {
    position: relative;
    width: 450px;
    height: 200px;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    cursor: default;
  }
}
#riskAssessmentEconomyData {
  width: 100%;
  height: 200px;
  margin: -20px 0 0 10px;
  div {
    position: relative;
    width: 450px;
    height: 200px;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    cursor: default;
  }
}
</style>
